<template>
  <el-dialog
    class="historical-news-model"
    :close-on-click-modal="false"
    :visible="visible"
    :width="$setRem(900)"
    :before-close="handleCancel">
    <main>
      <div class="search-container">
<!--        <div class="tabs">-->
<!--          <span :class="{ active: activeType === 'my' }" @click="handleSwitch('my')">-->
<!--            我的历史消息-->
<!--          </span>-->
<!--          <span :class="{ active: activeType === 'system' }" @click="handleSwitch('system')">-->
<!--            系统历史消息-->
<!--          </span>-->
<!--        </div>-->
        <div class="search">
          <div class="search-item">
            <label>类型 </label>
            <el-select
              placeholder="请选择类型"
              v-model="searchType">
            </el-select>
          </div>
          <div class="search-item">
            <label>隐患级别 </label>
            <el-select
              placeholder="请选择隐患级别"
              v-model="searchLevel">
            </el-select>
          </div>
          <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
        </div>
      </div>
      <div class="table-container">
        <el-table
          class="table-content"
          v-loading="tableLoading"
          element-loading-custom-class="custom-load"
          :data="tableData"
          :height="$setRem(500)"
          style="width: 100%">
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="levelStr" label="隐患级别"></el-table-column>
          <el-table-column prop="problem" label="内容"></el-table-column>
          <el-table-column prop="uploadDate" label="时间"></el-table-column>
          <el-table-column prop="handler" label="办理人"></el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <i class="iconfont iconchakan" @click="handleLook(scope.row)"></i>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 消息类型
    type: {
      type: String,
      default: 'my'
    }
  },
  data() {
    return {
      // 当前历史消息类型
      activeType: 'my',
      // 检查类型
      searchType: '',
      // 隐患级别
      searchLevel: '',
      tableLoading: false,
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0
    };
  },
  watch: {
    // type(val) {
    //   if (val) {
    //     // 消息类型切换重置条件
    //     this.handleClear();
    //     this.activeType = val;
    //   }
    // },
    // activeType(val) {
    //   if (val) this.getTableData();
    // },
    visible(val) {
      val && this.getTableData();
    }
  },
  methods: {
    getTableData() {},
    handleLook() {},
    /**
     * 历史消息切换
     * @param type {String} 消息类型
     */
    // handleSwitch(type) {
    //   this.handleClear();
    //   this.activeType = type;
    // },
    handleSearch() {
      this.getTableData();
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
    },
    // 重置参数
    handleClear() {
      this.searchType = '';
      this.searchLevel = '';
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
    },
    // 取消
    handleCancel() {
      this.$emit('cancel', false);
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';

  .historical-news-model {
    /*/deep/ .el-dialog__header {*/
    /*  padding: 0;*/
    /*}*/
    main {
      .search-container {
        width: 100%;
        height: 50px;
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tabs {
          width: 240px;
          height: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          span {
            width: 110px;
            height: 30px;
            padding: 2px 5px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: $disabledBg;
            cursor: pointer;
            transition: all .2s;
            &.active {
              background-color: $lightBtnBg;
            }
          }
        }
        .search {
          height: 100%;
          flex: 1;
          display: flex;
          align-items: center;
          padding-left: 20px;
          .search-item {
            width: 240px;
            display: flex;
            align-items: center;
            justify-content: center;
            label {
              margin-right: 10px;
            }
            /deep/ .el-select {
              width: 170px;
            }
          }
          .el-button {
            margin-left: 20px;
          }
        }
      }
    }
  }
</style>
